<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
 <head>
  <title>Automatic table sizing algorithm investigation (spanning cells)</title>
  <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
  <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/table/inspection/inspection-spanning.html"/>
  <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#auto-table-layout" />
  <style type="text/css">
   html, body p { background: white; padding: 1.5em 1em 0.5em 1em; margin: 0; border: 0; }
   body { background: url(support/horizontal-ruler) top left repeat-y; padding: 0; margin: 0; border: 0; }
   body * { border: solid 3px black; }
   table { width: 600px; margin: 1em 0; }
   td { height: 1em; }
   .p100 { width: 100%; }
   .p50 { width: 50%; }
   .p25 { width: 25%; }
   .f100 { width: 100px; }
   .f200 { width: 200px; }
   .f600 { width: 600px; }
  </style>
 </head>
 <body>

  <p>Blank rows have the same dimensions as the preceeding row, but with zero width spaces in the cells instead of text.</p>

  <p>100px</p>

  <table>
   <tr>
    <td class="f100" colspan="2">100px [2]</td>
    <td class="f100" colspan="1">100px [1]</td>
   </tr>
   <tr>
    <td class="f100" colspan="1">100px [1]</td>
    <td class="f100" colspan="2">100px [2]</td>
   </tr>
  </table>

  <table>
   <tr>
    <td class="f100" colspan="1">100px [1]</td>
    <td class="f100" colspan="1">100px [1]</td>
    <td class="f100" colspan="1">100px [1]</td>
   </tr>
   <tr>
    <td class="f100" colspan="2">100px [2]</td>
    <td class="f100" colspan="1">100px [1]</td>
   </tr>
   <tr>
    <td class="f100" colspan="1">100px [1]</td>
    <td class="f100" colspan="2">100px [2]</td>
   </tr>
  </table>

  <table>
   <tr>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="auto" colspan="1">auto [1]</td>
   </tr>
   <tr>
    <td class="f100" colspan="2">100px [2]</td>
    <td class="f100" colspan="1">100px [1]</td>
   </tr>
   <tr>
    <td class="f100" colspan="1">100px [1]</td>
    <td class="f100" colspan="2">100px [2]</td>
   </tr>
  </table>

  <table>
   <tr>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="auto" colspan="1">auto [1]</td>
   </tr>
   <tr>
    <td class="f100" colspan="2">100px [2]</td>
    <td class="auto" colspan="1">auto [1]</td>
   </tr>
   <tr>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="auto" colspan="2">auto [2]</td>
   </tr>
  </table>

  <table>
   <tr>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="auto" colspan="1">auto [1]</td>
   </tr>
   <tr>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="f100" colspan="2">100px [2]</td>
   </tr>
   <tr>
    <td class="auto" colspan="2">auto [2]</td>
    <td class="auto" colspan="1">auto [1]</td>
   </tr>
  </table>

  <p>100%</p>

  <table>
   <tr>
    <td class="p100" colspan="2">100% [2]</td>
    <td class="p100" colspan="1">100% [1]</td>
   </tr>
   <tr>
    <td class="p100" colspan="1">100% [1]</td>
    <td class="p100" colspan="2">100% [2]</td>
   </tr>
  </table>

  <table>
   <tr>
    <td class="p100" colspan="1">100% [1]</td>
    <td class="p100" colspan="1">100% [1]</td>
    <td class="p100" colspan="1">100% [1]</td>
   </tr>
   <tr>
    <td class="p100" colspan="2">100% [2]</td>
    <td class="p100" colspan="1">100% [1]</td>
   </tr>
   <tr>
    <td class="p100" colspan="1">100% [1]</td>
    <td class="p100" colspan="2">100% [2]</td>
   </tr>
  </table>

  <table>
   <tr>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="auto" colspan="1">auto [1]</td>
   </tr>
   <tr>
    <td class="p100" colspan="2">100% [2]</td>
    <td class="p100" colspan="1">100% [1]</td>
   </tr>
   <tr>
    <td class="p100" colspan="1">100% [1]</td>
    <td class="p100" colspan="2">100% [2]</td>
   </tr>
  </table>

  <table>
   <tr>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="auto" colspan="1">auto [1]</td>
   </tr>
   <tr>
    <td class="p100" colspan="2">100% [2]</td>
    <td class="auto" colspan="1">auto [1]</td>
   </tr>
   <tr>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="auto" colspan="2">auto [2]</td>
   </tr>
  </table>

  <table>
   <tr>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="auto" colspan="1">auto [1]</td>
   </tr>
   <tr>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="p100" colspan="2">100% [2]</td>
   </tr>
   <tr>
    <td class="auto" colspan="2">auto [2]</td>
    <td class="auto" colspan="1">auto [1]</td>
   </tr>
  </table>

  <p>50%</p>

  <table>
   <tr>
    <td class="p50" colspan="2">50% [2]</td>
    <td class="p50" colspan="1">50% [1]</td>
   </tr>
   <tr>
    <td class="p50" colspan="1">50% [1]</td>
    <td class="p50" colspan="2">50% [2]</td>
   </tr>
  </table>

  <table>
   <tr>
    <td class="p50" colspan="1">50% [1]</td>
    <td class="p50" colspan="1">50% [1]</td>
    <td class="p50" colspan="1">50% [1]</td>
   </tr>
   <tr>
    <td class="p50" colspan="2">50% [2]</td>
    <td class="p50" colspan="1">50% [1]</td>
   </tr>
   <tr>
    <td class="p50" colspan="1">50% [1]</td>
    <td class="p50" colspan="2">50% [2]</td>
   </tr>
  </table>

  <table>
   <tr>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="auto" colspan="1">auto [1]</td>
   </tr>
   <tr>
    <td class="p50" colspan="2">50% [2]</td>
    <td class="p50" colspan="1">50% [1]</td>
   </tr>
   <tr>
    <td class="p50" colspan="1">50% [1]</td>
    <td class="p50" colspan="2">50% [2]</td>
   </tr>
  </table>

  <table>
   <tr>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="auto" colspan="1">auto [1]</td>
   </tr>
   <tr>
    <td class="p50" colspan="2">50% [2]</td>
    <td class="auto" colspan="1">auto [1]</td>
   </tr>
   <tr>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="auto" colspan="2">auto [2]</td>
   </tr>
  </table>

  <table>
   <tr>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="auto" colspan="1">auto [1]</td>
   </tr>
   <tr>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="p50" colspan="2">50% [2]</td>
   </tr>
   <tr>
    <td class="auto" colspan="2">auto [2]</td>
    <td class="auto" colspan="1">auto [1]</td>
   </tr>
  </table>

  <p>25%</p>

  <table>
   <tr>
    <td class="p25" colspan="2">25% [2]</td>
    <td class="p25" colspan="1">25% [1]</td>
   </tr>
   <tr>
    <td class="p25" colspan="1">25% [1]</td>
    <td class="p25" colspan="2">25% [2]</td>
   </tr>
  </table>

  <table>
   <tr>
    <td class="p25" colspan="1">25% [1]</td>
    <td class="p25" colspan="1">25% [1]</td>
    <td class="p25" colspan="1">25% [1]</td>
   </tr>
   <tr>
    <td class="p25" colspan="2">25% [2]</td>
    <td class="p25" colspan="1">25% [1]</td>
   </tr>
   <tr>
    <td class="p25" colspan="1">25% [1]</td>
    <td class="p25" colspan="2">25% [2]</td>
   </tr>
  </table>

  <table>
   <tr>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="auto" colspan="1">auto [1]</td>
   </tr>
   <tr>
    <td class="p25" colspan="2">25% [2]</td>
    <td class="p25" colspan="1">25% [1]</td>
   </tr>
   <tr>
    <td class="p25" colspan="1">25% [1]</td>
    <td class="p25" colspan="2">25% [2]</td>
   </tr>
  </table>

  <table>
   <tr>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="auto" colspan="1">auto [1]</td>
   </tr>
   <tr>
    <td class="p25" colspan="2">25% [2]</td>
    <td class="auto" colspan="1">auto [1]</td>
   </tr>
   <tr>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="auto" colspan="2">auto [2]</td>
   </tr>
  </table>

  <table>
   <tr>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="auto" colspan="1">auto [1]</td>
   </tr>
   <tr>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="p25" colspan="2">25% [2]</td>
   </tr>
   <tr>
    <td class="auto" colspan="2">auto [2]</td>
    <td class="auto" colspan="1">auto [1]</td>
   </tr>
  </table>

  <p>25% and 100px</p>

  <table>
   <tr>
    <td class="p25" colspan="2">25% [2]</td>
    <td class="f100" colspan="1">100px [1]</td>
   </tr>
   <tr>
    <td class="p25" colspan="1">25% [1]</td>
    <td class="f100" colspan="2">100px [2]</td>
   </tr>
  </table>

  <table>
   <tr>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="auto" colspan="1">auto [1]</td>
   </tr>
   <tr>
    <td class="p25" colspan="2">25% [2]</td>
    <td class="f100" colspan="1">100px [1]</td>
   </tr>
   <tr>
    <td class="p25" colspan="1">25% [1]</td>
    <td class="f100" colspan="2">100px [2]</td>
   </tr>
  </table>

  <table>
   <tr>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="auto" colspan="1">auto [1]</td>
   </tr>
   <tr>
    <td class="p25" colspan="2">25% [2]</td>
    <td class="f100" colspan="1">100px [1]</td>
   </tr>
   <tr>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="auto" colspan="2">auto [2]</td>
   </tr>
  </table>

  <table>
   <tr>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="auto" colspan="1">auto [1]</td>
   </tr>
   <tr>
    <td class="p25" colspan="1">25% [1]</td>
    <td class="f100" colspan="2">100px [2]</td>
   </tr>
   <tr>
    <td class="auto" colspan="2">auto [2]</td>
    <td class="auto" colspan="1">auto [1]</td>
   </tr>
  </table>

  <table>
   <tr>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="auto" colspan="1">auto [1]</td>
   </tr>
   <tr>
    <td class="p25" colspan="1">25% [1]</td>
    <td class="auto" colspan="2">auto [2]</td>
   </tr>
   <tr>
    <td class="f100" colspan="2">100px [2]</td>
    <td class="auto" colspan="1">auto [1]</td>
   </tr>
  </table>

  <p>100% and 100px</p>

  <table>
   <tr>
    <td class="p100" colspan="2">100% [2]</td>
    <td class="f100" colspan="1">100px [1]</td>
   </tr>
   <tr>
    <td class="p100" colspan="1">100% [1]</td>
    <td class="f100" colspan="2">100px [2]</td>
   </tr>
  </table>

  <table>
   <tr>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="auto" colspan="1">auto [1]</td>
   </tr>
   <tr>
    <td class="p100" colspan="2">100% [2]</td>
    <td class="f100" colspan="1">100px [1]</td>
   </tr>
   <tr>
    <td class="p100" colspan="1">100% [1]</td>
    <td class="f100" colspan="2">100px [2]</td>
   </tr>
  </table>

  <table>
   <tr>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="auto" colspan="1">auto [1]</td>
   </tr>
   <tr>
    <td class="p100" colspan="2">100% [2]</td>
    <td class="f100" colspan="1">100px [1]</td>
   </tr>
   <tr>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="auto" colspan="2">auto [2]</td>
   </tr>
  </table>

  <table>
   <tr>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="auto" colspan="1">auto [1]</td>
   </tr>
   <tr>
    <td class="p100" colspan="1">100% [1]</td>
    <td class="f100" colspan="2">100px [2]</td>
   </tr>
   <tr>
    <td class="auto" colspan="2">auto [2]</td>
    <td class="auto" colspan="1">auto [1]</td>
   </tr>
  </table>

  <table>
   <tr>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="auto" colspan="1">auto [1]</td>
    <td class="auto" colspan="1">auto [1]</td>
   </tr>
   <tr>
    <td class="p100" colspan="1">100% [1]</td>
    <td class="auto" colspan="2">auto [2]</td>
   </tr>
   <tr>
    <td class="f100" colspan="2">100px [2]</td>
    <td class="auto" colspan="1">auto [1]</td>
   </tr>
  </table>

  <p>100% and 50%</p>

  <table>
   <tr>
    <td class="p100" colspan="2">100% [2]</td>
   </tr>
   <tr>
    <td class="p50" colspan="1">50% [1]</td>
    <td class="p50" colspan="1">50% [1]</td>
   </tr>
  </table>

  <table>
   <tr>
    <td class="p50" colspan="1">50% [1]</td>
    <td class="p50" colspan="1">50% [1]</td>
   </tr>
   <tr>
    <td class="p100" colspan="2">100% [2]</td>
   </tr>
  </table>

  <table>
   <tr>
    <td class="p100" colspan="2">100% [2]</td>
   </tr>
   <tr>
    <td class="p50" colspan="1">50% [1]</td>
    <td class="p50" colspan="1">50% [1]</td>
   </tr>
   <tr>
    <td class="p100" colspan="2">100% [2]</td>
   </tr>
  </table>

  <p>100% and 50% and content</p>

  <table>
   <tr>
    <td class="p100" colspan="2">100% [2]</td>
   </tr>
   <tr>
    <td class="p50" colspan="1">50% [1]</td>
    <td class="p50" colspan="1">50% [1] text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</td>
   </tr>
  </table>

  <table>
   <tr>
    <td class="p50" colspan="1">50% [1]</td>
    <td class="p50" colspan="1">50% [1] text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</td>
   </tr>
   <tr>
    <td class="p100" colspan="2">100% [2]</td>
   </tr>
  </table>

  <table>
   <tr>
    <td class="p100" colspan="2">100% [2]</td>
   </tr>
   <tr>
    <td class="p50" colspan="1">50% [1]</td>
    <td class="p50" colspan="1">50% [1] text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</td>
   </tr>
   <tr>
    <td class="p100" colspan="2">100% [2]</td>
   </tr>
  </table>

  <table>
   <tr>
    <td class="p100" colspan="2">100% [2]</td>
   </tr>
   <tr>
    <td class="p50" colspan="1">50% [1] text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</td>
    <td class="p50" colspan="1">50% [1]</td>
   </tr>
  </table>

  <table>
   <tr>
    <td class="p50" colspan="1">50% [1] text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</td>
    <td class="p50" colspan="1">50% [1]</td>
   </tr>
   <tr>
    <td class="p100" colspan="2">100% [2]</td>
   </tr>
  </table>

  <table>
   <tr>
    <td class="p100" colspan="2">100% [2]</td>
   </tr>
   <tr>
    <td class="p50" colspan="1">50% [1] text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</td>
    <td class="p50" colspan="1">50% [1]</td>
   </tr>
   <tr>
    <td class="p100" colspan="2">100% [2]</td>
   </tr>
  </table>

 </body>
</html>
